<template>
    <view>
        <u-navbar title="我的订单" :autoBack="true" :placeholder="true">
        </u-navbar>
        <view class="main">
            <!-- 搜索订单 -->
            <view class="topFunc">
                <view class="searchOrder">
                    <u-input class="input" confirmType="search" clearable prefixIcon="search" placeholder="搜索订单"
                        @confirm="searchOrder"></u-input>
                    <u-button class="button" @click="back">取消</u-button>
                </view>
                <u-subsection class="subsection" mode="subsection" :list="list" :current="curNow"
                    @change="sectionChange">
                </u-subsection>
            </view>
            <scroll-view scroll-y="true" :style="'height: ' + contentHeight + 'px;'" :refresher-enabled="true" refresher-background="#eef2f6">
                <block v-if="curNow == 0">
                    <allOrderList :allOrderList="orderList"></allOrderList>
                </block>
                <block v-if="curNow == 1">
                    <unpaidOrderList v-for="unpaidItem,index in unpaidList" :key="index" :unpaidItem="unpaidItem"></unpaidOrderList>
                </block>
                <!-- 已付款列表 -->
                <block v-if="curNow == 2">
                    <paidOrderList v-for="paidItem,index in paidList" :key="index" :paidItem="paidItem"></paidOrderList>
                </block>
                <block v-if="curNow == 3">
                    待评价
                </block>
                <block v-if="curNow == 4">
                    已完成
                </block>
            </scroll-view>
        </view>
    </view>
</template>

<script>
import unpaidOrderList from './unpaidOrderList'
import paidOrderList from './paidList'
import allOrderList from './allOrder'
export default {
    components: {
        unpaidOrderList,
        paidOrderList,
        allOrderList
    },
    data() {
        return {
            list: ['全部', '未付款', '已付款', '待评价', '已完成'],
            curNow: 0,
            // 订单列表
            orderList: [
                {
                    id: 1,
                    title: '第一本书',
                    bookLink: 'http://182.61.31.180:5000/images/1653403893152_logo.png',
                    price: 100,
                    author: '张三',
                    selected: false,//当前订单是否被选中
                    isPay: false,//是否已支付
                    isSend: false, // 是否已发货
                    isComment: false,//是否已评价
                    isFinish: false,//是否已完成
                    orderTime: '2022-6-5 20:52:10',//下单时间
                    isCancel: true,//是否已取消

                },
                {
                    id: 1,
                    title: '第一本书',
                    bookLink: 'http://182.61.31.180:5000/images/1653403893152_logo.png',
                    price: 100,
                    author: '张三',
                    selected: false,//当前订单是否被选中
                    isPay: false,//是否已支付
                    isSend: false, // 是否已发货
                    isComment: false,//是否已评价
                    isFinish: false,//是否已完成
                    orderTime: '2022-6-5 20:52:43',//下单时间
                    isCancel: false,//是否已取消

                },
                {
                    id: 1,
                    title: '第一本书',
                    bookLink: 'http://182.61.31.180:5000/images/1653403893152_logo.png',
                    price: 100,
                    author: '张三',
                    selected: false,//当前订单是否被选中
                    isPay: true,//是否已支付
                    isSend: false, // 是否已发货
                    isComment: false,//是否已评价
                    isFinish: false,//是否已完成
                    orderTime: '2022-6-5 20:52:20',//下单时间
                    isCancel: false,//是否已取消
                    // 物流状态
                    logisticsStatus: {
                        isSend: false,
                        // 是否揽收
                        isLanshou: false,
                        // 是否已签收
                        isQianshou: false,
                        // 最新物流状态
                        status: '等待卖家发货'
                    }
                },
                {
                    id: 1,
                    title: '第一本书',
                    bookLink: 'http://182.61.31.180:5000/images/1653403893152_logo.png',
                    price: 100,
                    author: '张三',
                    selected: false,//当前订单是否被选中
                    isPay: false,//是否已支付
                    isSend: false, // 是否已发货
                    isComment: false,//是否已评价
                    isFinish: false,//是否已完成
                    orderTime: '2022-6-5 20:52:27',//下单时间
                    isCancel: false,//是否已取消
                }
            ]
        }
    },
    computed: {
        contentHeight() {
            // return 300
            return this.$tools.getScreenHeight() - 6 * 16 - 5 * 16
        },
        closeTime() {
            return function (item) {
                // 15分钟后自动关闭订单，建议尽快付款
                var now = new Date().getTime();
                var orderTime = new Date(item.orderTime).getTime();
                var closeTime = new Date(orderTime + 15 * 60 * 1000).getTime();
                var diff = (closeTime - now)
                if (diff < 0) {
                    // 向后端发送请求，关闭订单
                    { }
                    return 0;
                }
                return diff;
            }
        },
        // 未付款列表
        unpaidList() {
            return this.orderList.filter(item => {
                return item.isPay == false&&item.isCancel==false;
            })
        },
        // 已付款列表
        paidList() {
            return this.orderList.filter(item => {
                return item.isPay == true;
            })
        },
        // 待评价列表
        commentList() {
            return this.orderList.filter(item => {
                return item.isComment == false;
            })
        },
        // 已完成列表
        finishList() {
            return this.orderList.filter(item => {
                return item.isFinish == true;
            })
        }
    },
    methods: {
        // 切换订单
        sectionChange(index) {
            this.curNow = index;
        },
        // 搜索订单
        searchOrder() {
            console.log('searchOrder');
        },
        back() {
            this.$Router.back();
        }
    }
}
</script>
<style lang="scss">
.main {
    .topFunc {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 6rem;

        .searchOrder {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.5rem 0;
            width: 95%;

            .input {
                width: 80%;
                flex: 1;
                border-radius: 1rem;
            }

            .button {
                width: 3.5rem;
                border: none;
                background: transparent;
                color: #333;
                font-size: 0.8rem;
                text-align: center;
                line-height: 1.5rem;
                font-size: 1rem;
            }
        }
    }

}
</style>